
<template>
  <div id="chart" :style="size"></div>
</template>

<script>
import echarts from 'echarts'
import china from '../../map/data/china.json'
import lodash from 'lodash'

export default {
  name: 'TimelineMap',
  props: {
    // 数据
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    /**
     * 配置
     * [{name:"用户数",title:"用户数全国分布情况",dimensions:['prov','count1']}]
     */
    options: {
      type: Array,
      default: function () {
        return []
      }
    },
    size:{
      type: Object,
      default: function () {
        return {
          width: '100%',
          heigth:'400px'
        }
      } 
    }
  },
  data() {
    return {
      echarts: null ,
      chartOption: {
        // 基本配置
        baseOption: {
          timeline: {
              axisType: 'category',
              // orient: 'vertical',
              autoPlay: true,
              // inverse: true,
              playInterval: 20000,
              // center:"30%",
              // width: 65,
              // height: null,
              bottom: '5%',
              loop: true,
              label: {
                  normal: {
                      textStyle: {
                          color: '#b0c2f9'
                      }
                  },
                  emphasis: {
                      textStyle: {
                          color: '#b0c2f9'
                      }
                  }
              },
              tooltip: {
                  formatter: '{b}'
              },
              // 需要更新
              data: []
          },
          title: {
              left: 'center',
              subtext: '',
              textStyle: {
                  fontSize: 20,
                  // fontWeight:'bolder',
                  color: '#b0c2f9'
              },
              subtextStyle: {
                  fontSize: 17,
                  fontWeight:'bolder',
                  color: '#b0c2f9'
              }
          },
          // backgroundColor: '#000',
          tooltip: {},
          series: [],
          // animationDurationUpdate: 500,
          // animationEasingUpdate: 'quinticInOut',
          visualMap: {
              min: 0,
              max: 500,
              left:'2%',
              bottom: '5%',
              itemWidth: 10,
              itemHeight: 100,
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              textStyle: {
                color : '#b0c2f9'
              },
              inRange: {
                // color: ['#3B5077', '#031525'] // 蓝黑
                // color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                // color: ['#23074d', '#cc5333'] // 紫红
                color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
            }
          },
        },
        // 数据配置
        options: []
      }
      
    }
  },
  computed:{
    chartStyle(){
      return {

      }
    }
  },
  mounted(){
      this.registerMap()
      this.redraw()
      // 窗口变化监听事件
      this.resizeHandler = this._.debounce(this.resize,300 )
      window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    /**
     * 刷新数据
     */
    redraw(){
      this.updateOptions() ;
      this.$nextTick(function() {
        if(this.echarts == null){
          this.echarts = echarts.init(document.getElementById("chart"))
        }
        this.echarts.setOption(this.chartOption);
      })
    },

    registerMap(){
      echarts.registerMap('china', china);
    },
    
    /**
     * 更新timeline需要的options
     * 
     */
    updateOptions(){
      // 时间轴 数据
      let timelineData = [] 
      let dataOptions = [] 

      for(var i=0 ; i< this.options.length ; i++){
        var option = this.options[i] ;

        timelineData.push(option.name) 
        let dataOption = {
          dataset:{
            dimensions: option.dimensions,
            source: this.dataList
          },
          series: [{
            // 居中显示地图
            center: "center",
            // 隐藏文本
            label: {
                emphasis: {
                    show: false
                },
                normal: {
                    show: false
                }
            },
            // 地图类型
            mapType: "china",
            type: "map",
            // 地图样式
            itemStyle: {
                normal: {
                    areaColor: '#112246',
                    borderColor: '#166ABB',
                    borderWidth: 1
                },
                emphasis: {
                    // areaColor: '#112246'
                }
            },
          }],
          tooltip: {
              formatter: '{b} '+ option.name + ':{c}'
              // formatter: function(data){
              //     if( !isNaN(data.value) ){
              //         return data.name + " " + option.name + "："+data.value;
              //     }
              // }
          },
          // title
          title: {
              text: option.title
          }
        }
        dataOptions.push(dataOption)

      }
      this.chartOption.options = dataOptions 
      this.chartOption.baseOption.timeline.data = timelineData 
    },
    /**
     * 重新适应窗口
     */
    resize(){
      if (this.echarts && this.$el &&
        this.$el.clientWidth &&
        this.$el.clientHeight) {
        this.echarts.resize()
      }
    }

    
  }
}
</script>

<style>

</style>
